import React from 'react';
import { InputNumber, Select, Input, Checkbox } from 'antd';
const { TextArea } = Input;
const { Option } = Select;

export default (inst, styles) => {
    const changeItem = key => {
        return value => {
            if (typeof value === 'string' || typeof value === 'number') {
                // state.value = value;
                inst.props.onChange(key, value);
            } else if (typeof value === 'object' && value.target) {
                // state.value = value.target.value;
                inst.props.onChange(key, value.target.value);
            } else {
                inst.props.onChange(key, value);
            }
        };
    };

    const renderForm = (config, status) => {
        const { type, key, options, disabled } = config;

        if (type === 'input') {
            return (
                <span>
                    {status === 'browse' ? (
                        inst.props.value
                    ) : (
                        <Input 
                            size="small" 
                            value={inst.props.value} 
                            onChange={changeItem(key)} 
                            disabled={disabled} 
                            allowClear
                            className="custom-form-item-input"
                        />
                    )}
                </span>
            );
        } else if (type === 'select') {
            let showOptions = options.filter(item => item.value === inst.props.value)[0];

            return (
                <span>
                    {status === 'browse' ?
                        showOptions ? showOptions.label : inst.props.value
                        : (
                            <Select
                                value={inst.props.value}
                                onChange={changeItem(key)}
                                className="custom-form-select"
                                disabled={disabled}
                                size="small"
                            >
                                {options.map((item, index) => {
                                    return (
                                        <Option key={index} value={item.value}>
                                            {item.label}
                                        </Option>
                                    );
                                })}
                            </Select>
                        )}
                </span>
            );
        } else if (type === 'checkbox') {
            return (
                <span>
                    <Checkbox.Group
                        disabled={disabled || status === 'browse'}
                        options={options}
                        value={inst.props.value}
                        onChange={changeItem(key)}
                    />
                </span>
            );
        } else if (type === 'numberInput') {
            return (
                <span>
                    {status === 'browse' ? (
                        inst.props.value
                    ) : (
                        <InputNumber
                            size="small"
                            value={inst.props.value}
                            onChange={changeItem(key)}
                            style={{
                                width: '100%'
                            }}
                            disabled={disabled}
                        />
                    )}
                </span>
            );
        } else if (type === 'textarea') {
            if (status === 'browse') {
                return inst.props.value;
            }
            return (
                <span>
                    {status === 'browse' ? (
                        inst.props.value
                    ) : (
                        <TextArea
                            autoSize={{
                                minRows: options.minRows || 2
                            }}
                            value={inst.props.value}
                            onChange={changeItem(key)}
                            disabled={disabled}
                            maxLength={options.max || null}
                            showCount={true}
                        />
                    )}
                </span>
            );
        } else if (type === 'custom') {
            if (typeof config.render === 'function') {
                return config.render(inst.props.value, {
                    itemConfig: config,
                    status: status
                });
            } else {
                return <span>{inst.props.value}</span>
            }
        }
    };

    return {
        renderForm
    };
};
